<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>弹窗</title>
<style type="text/css">

    .alertbox{
        width:300px;
        height:400px;
        position:absolute;
        top: 50%;
        left:50%;
        margin-left: -151px;
        border:1px solid #d2d2d2;
        transition: .4s all ease-out;
    }

    .title{
        line-height: 80px;
        height:80px; 
        background:#f40;
        border-bottom: 1px solid #d2d2d2;
        width:100%;
    }
    .title .closeBtn{
        float:right;
        margin-right: 20px;
        font-size: 40px;
    }
    .content{
        text-align: center; 
    }
</style>
<script type="text/javascript">
    class Box{
        constructor (title="帅气的大彬哥",content="他今年17岁",type=1){
            this.alertbox=document.createElement('div');
            this.alertbox.classList.add('alertbox');
            this.alertbox.classList.add('type'+type);
            this.boxTitle=document.createElement('div');
            this.boxTitle.classList.add('title');
            this.boxTitle.innerHTML=title;
            this.closeBtn=document.createElement('div');
            this.closeBtn.innerHTML='x';
            this.closeBtn.classList.add('closeBtn');
            this.boxTitle.appendChild(this.closeBtn);
            this.boxContent=document.createElement('div');
            this.boxContent.innerHTML=content;
            this.boxContent.classList.add('content');
            this.alertbox.appendChild(this.boxTitle);
            this.alertbox.appendChild(this.boxContent);
            //按钮
            this.btn=document.createElement('input');
            this.btn.value='点我有惊喜';
            this.btn.type='button';

            this.showBox();
            this.hideAlert();
        }
        showBox(){
            document.querySelector('body').appendChild(this.btn);
        }
        hideAlert(){
            var time=null;
            this.btn.onclick=()=>{
                document.querySelector('body').appendChild(this.alertbox);
                clearTimeout(time);
                time=setTimeout(()=>{
                    this.alertbox.style.transform="translate(0,-200px)";
                },1)
            }
            this.closeBtn.onclick=()=>{
               
            this.alertbox.style.transform="translate(0,0)";
                
            time=setTimeout(()=>{
                document.body.removeChild(this.alertbox);
            },400)

            };
        }
    }
    window.onload=function(){
        // new Box();
        new Box('帅气的大彬哥222','他今年15了',2);
    };    
</script>
</head>
<body>
</body>
</html>